import ajax from '../../utils/ajax';

const dataList = document.getElementById('dataList');
const pageSelect = document.getElementById('pageSelect');
let per_page = 1;
let page = 1;
let search_string = '';
let pageTotal;

init();

function init() {
    //渲染初始数据
    showData();
}

function showData() {
    dataList.innerHTML = '';
    ajax('get', '/api/getNote', {
        search_string,
        page,
        per_page,
    }).then(({ data: { list, total, pageSize } }) => {
        per_page = pageSize;
        pageTotal = Math.ceil(total / pageSize);
        //生成分页按钮
        createPageSelect();
        // 渲染数据
        list.forEach(item => {
            const tr = document.createElement('tr');
            let td;

            td = document.createElement('td');
            td.innerText = item.id;
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.title;
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.updateTime.slice(0, 10);
            tr.appendChild(td);

            td = document.createElement('td');
            td.innerText = item.createTime.slice(0, 10);
            tr.appendChild(td);

            td = document.createElement('td');

            const modifyBtn = document.createElement('button');
            modifyBtn.innerText = '修改';
            modifyBtn.onclick = modifyBtn_click.bind(item.id);
            td.appendChild(modifyBtn);

            const deleteBtn = document.createElement('button');
            deleteBtn.innerText = '删除';
            deleteBtn.onclick = deleteBtn_click.bind(item.id);
            td.appendChild(deleteBtn);
            tr.appendChild(td);
            dataList.appendChild(tr);

            // console.log(item.id);
        });
        // console.log(list);
    })

}


//修改
//   modifyBtn.onclick = modifyBtn_click.bind(item.id);  bind 将item.id 改变成为this
function modifyBtn_click() {
    console.log(this);

}
//删除
function deleteBtn_click() {
   if(!confirm('确定要删除吗？')) {
    return
   }
   ajax('post',)
}

//分页
function createPageSelect() {
    pageSelect.innerHTML = '';
    let btn;
    btn = document.createElement('button');
    btn.innerText = '首页';
    btn.onclick = function () {
        page = 1;
        showData();
    }
    pageSelect.appendChild(btn);

    //上一页
    if (page > 1) {
        const btn = document.createElement('button');
        btn.innerText = '上一页';
        btn.onclick = function () {
            page--;
            showData();
        }
        pageSelect.appendChild(btn);
    }

    //数字按钮
    let start = page - 3 < 1 ? 1 : page - 3;
    let end = page + 3 > pageTotal ? pageTotal : page + 3;
    if (start > 1) {
        const span = document.createElement('span');
        span.innerText = '...';
        pageSelect.appendChild(span);
    }

    for (let i = start; i <= end; i++) {
        btn = document.createElement('button');
        btn.innerText = i;
        if (i == page) {
            btn.style.background = 'pink'
        }
        btn.onclick = function () {
            page = i;
            showData();
        }
        pageSelect.appendChild(btn);
    }
    if (end < pageTotal) {
        const span = document.createElement('span')
        span.innerText = '...'
        pageSelect.appendChild(span)
    }

    //下一页

    if (page < pageTotal) {
        btn = document.createElement('button');
        btn.innerText = '下一页';
        btn.onclick = function () {
            page++;
            showData();
        }
        pageSelect.appendChild(btn);
    }

    if (pageTotal > 1) {
        btn = document.createElement('button');
        btn.innerText = '尾页';
        btn.onclick = function () {
            page = pageTotal;
            showData();
        }
        pageSelect.appendChild(btn);

    }

}